<template>
	<view class="container">
		<view class="address-box" @click="addAddress" v-if="address.ad_tel!=''">
			<view class="address-1">
				<!-- 			<text>{{address.ad_name}}</text>
			<text>{{address.ad_tel}}</text> -->
			</view>
			<view class="address-2">
				<view class="address-2-left">
					<!-- <text>{{address.ad_street}}</text> -->
				</view>
				<image src="../../../static/rightIcon.png" mode="widthFix"></image>
			</view>
		</view>
		<view class="address" @click="addAddress" v-else>
			<view class="left">
				<view class="left-one">暂无收货地址</view>
				<view class="left-two">立即添加收货地址</view>
			</view>
			<view class="right">
				<u-icon name="arrow-right"></u-icon>
			</view>
		</view>

		<view class="con">
			<view class="pro-con">
				<view class="pro-img">
					<!-- <u-image src="../../../static/productImg.png" width="176rpx" height="176rpx"></u-image> -->
				</view>
				<view class="pro-right">

					<view class="title">龙狮戴尔(LONSDALE)t恤男夏季冰丝衣服男装纯棉...</view>
					<view class="shape">已选 火腿4斤装，原味，1个</view>
					<view class="num2">
						<view class="num-fl">￥88.88</view>
						<view class="num-fr">

							<u-number-box v-model="num" @change="valChange"></u-number-box>

						</view>
					</view>
				</view>
			</view>
			<view class="cd2">
				<view class="cd-left2">配送方式</view>
				<view class="cd-right2">包邮</view>
			</view>
			<view class="cd2">
				<view class="cd-left2">备注</view>
			</view>
			<view class="cd2">
				<textarea placeholder="请输入备注"></textarea>
			</view>
		</view>
		<view class="con">
			<u-cell-group :border="false">
				<u-cell title="商品总额" :isLink="false" value="1000"></u-cell>
				<u-cell title="运费" :isLink="false" value="包邮"></u-cell>
				<u-cell title="付款方式" :isLink="true" value="查看" @click="payway()"></u-cell>
			</u-cell-group>
		</view>

		<view class="bottom">
			<view class="price">
				<view>￥<text>96.88</text></view>
			</view>
			<view class="buy2" @click="subOrder()">提交订单</view>
		</view>
		<u-popup :show="showsale" :round="10" mode="bottom" @close="closesale">
			<view class="showtitle flex align-center justify-center">
				<view class="icon" @click="closesale">
					<u-icon name="close" color="#2C2C2C" size="18"></u-icon>
				</view>
			</view>
			<view class="showcon">
				<view class="top2">
					<view class="title">
						￥1000
					</view>
					<view class="title">
						支付金额
					</view>
				</view>
				<view class="top2">
					<view>
						<text>上传支付截图</text>
					</view>
				</view>
				<view class="images">
					<u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" multiple
						:maxCount="1"></u-upload>
				</view>
				<view>
					<view class="btn" @click="justpay()">立即支付</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				num: 1,
				showsale: false,
				fileList1: [],
				images: [],
				address: {
					ad_name: '',
					ad_tel: '',
					ad_street: '',
					id: ''
				}
			}
		},
		onLoad() {},
		methods: {
			goback() {
				uni.navigateTo({
					url: '/pages/index/productDetail'
				})
			},
			valChange(e) {
				console.log('当前值为: ' + e.value)
				this.num = e.value
			},
			//跳转地址
			addAddress() {
				uni.navigateTo({
					url: '/pages/index/address/address'
				})
			},
			payway() {
				uni.navigateTo({
					url: '/pagesB/see/see'
				})
			},
			// 删除图片
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					let item = this[`fileList${event.name}`][fileListLen]
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
				}
				this.images = this.fileList1.map(item => item.url)
				console.log(this.images, 'image')
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: 'https://919admin.71.dianchuiguan.com.cn/api/common/upload', // 仅为示例，非真实的接口地址
						filePath: url,
						name: 'file',
						formData: {
							user: 'test'
						},
						success: (res) => {
							const ret = JSON.parse(res.data)
							console.log(ret);
						}
					});
				})
			},
			subOrder() {
				this.showsale = true
			},
			closesale() {
				this.showsale = false
			},
			justpay() {
				uni.navigateTo({
					url: '/pagesB/payresult/payresult'
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f9f9f9;
	}

	.container {

		padding-top: 24rpx;
		padding-bottom: 200rpx;
	}

	.address-box {
		width: 654rpx;
		height: 160rpx;
		margin: 0 auto;
		margin-top: 34rpx;
		padding: 30rpx 20rpx;
		border-radius: 10rpx;
		box-shadow: 2rpx 2rpx 16rpx 0px rgba(163, 162, 165, 0.35);
		margin-bottom: 30rpx;
	}

	.address-1 {
		font-size: 30rpx;

		>text:nth-child(2) {
			margin-left: 20rpx;
		}
	}

	.address-2 {
		align-items: center;
		justify-content: space-between;
		font-size: 30rpx;
		margin-top: 20rpx;

		image {
			width: 14rpx;
		}

		.address-2-left {
			>text:nth-child(2) {
				margin-left: 20rpx;
			}
		}
	}

	.address {
		width: 702rpx;
		height: 160rpx;
		margin: 0 auto;
		padding-top: 20rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 2rpx 8rpx 2rpx rgba(0, 0, 0, 0.05);
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		opacity: 1;

		.left {
			float: left;

			.left-one {
				font-size: 30rpx;
				font-family: PingFang SC-Bold, PingFang SC;
				font-weight: bold;
				color: #253147;
				margin-top: 32rpx;
				margin-left: 32rpx;
				text-align: left;
			}

			.left-two {
				font-size: 30rpx;
				line-height: 30rpx;
				text-align: left;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: #888A9C;
				margin-top: 16rpx;
				margin-left: 32rpx;
			}
		}

		.right {
			float: right;
			margin: 50rpx 22rpx;
		}
	}


	.pro-con {
		width: 642rpx;
		height: auto;
		margin: 0 auto;
		display: flex;
		margin-top: 26rpx;
		padding: 24rpx 26rpx;

		.pro-img {
			float: left;
			border-radius: 15rpx;
		}

		.pro-right {
			margin-left: 24rpx;
			width: 450rpx;
			float: left;
			margin-left: 20rpx;

			.title {
				font-size: 26rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: #333333;
				overflow: hidden;
				text-overflow: ellipsis;
				line-height: 44rpx;
				margin-top: 0rpx;
			}

			.shape {
				line-height: 36rpx;
				font-size: 26rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: #888888;
			}

			.num2 {
				width: 100%;
				height: auto;
				margin: 0 auto;

				.num-fl {
					float: left;
					line-height: 44rpx;
					font-size: 32rpx;
					font-family: PingFang SC-Bold, PingFang SC;
					font-weight: bold;
					color: #FF2347;
					text-align: left;

				}

				.num-fr {
					float: right;

					text {
						width: 50rpx;
						line-height: 50rpx;
						text-align: center;
						display: inline-block;
						// background-color: #F7F7F7;
						margin-right: 10rpx;
					}

					.add {
						width: 48rpx;
						height: 48rpx;
						background: #FFFFFF;
						border-radius: 8rpx;
						opacity: 1;
						border: 1px solid #888A9C;
						margin-right: 20rpx;
					}

					.subtract {
						width: 48rpx;
						height: 48rpx;
						background: #FFFFFF;
						border-radius: 8rpx;
						opacity: 1;
						border: 1px solid #888A9C;
					}
				}
			}

		}
	}

	.cd2 {
		width: 702rpx;
		height: auto;
		float: none;
		overflow: hidden;
		margin: 0 auto;
		padding-top: 24rpx;
		background-color: #fff;

		.cd-left2 {
			font-size: 28rpx;
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: bold;
			color: #333333;
			float: left;
			line-height: 28rpx;
			padding-left: 32rpx;
		}

		.cd-right2 {
			float: right;
			font-size: 28rpx;
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: bold;
			color: #888A9C;
			padding-right: 24rpx;

		}

		textarea {
			width: 600rpx;
			height: 200rpx;
			margin: 0 auto;
			background: #F8F8F8;
			border-radius: 16rpx;
			opacity: 1;
			padding: 20rpx 24rpx;
			margin-bottom: 28rpx;

		}
	}

	.con {

		width: 702rpx;
		height: auto;
		margin: 0 auto;
		float: none;
		overflow: hidden;
		margin-top: 20rpx;
		background-color: #ffffff;
		border-radius: 16rpx;
		border: #fff solid 1px;
		font-size: 28rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #4C4C4C;
	}

	.bottom {
		width: 100%;
		height: 112rpx;
		background: #FFFFFF;
		position: fixed;
		bottom: 0;

		.price {
			font-size: 26rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #333333;
			float: left;
			margin: 24rpx;

			text {
				font-size: 36rpx;
				font-family: PingFang SC-Heavy, PingFang SC;
				font-weight: 800;
				color: #333333;
			}
		}

		.buy2 {
			width: 192rpx;
			height: 72rpx;
			float: right;
			border-radius: 36rpx;
			font-size: 32rpx;
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: bold;
			background: linear-gradient(to bottom, #F9773A, #FF3B06);
			color: #ffffff;
			line-height: 72rpx;
			opacity: 1;
			text-align: center;
			margin-right: 24rpx;
			margin-top: 20rpx;
			border: none;
		}

	}

	.showcon {
		padding: 30rpx;
	}

	.showtitle {
		width: 100%;
		height: 100rpx;
		line-height: 100rpx;
		font-size: 32rpx;
		color: #333333;
		text-align: center;
		font-weight: bold;
		position: relative;

		.icon {

			position: absolute;
			right: 35rpx;
			top: 20rpx;
		}
	}

	.btn {
		width: 650rpx;
		height: 82rpx;
		font-size: 30rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #FFFFFF;
		line-height: 82rpx;
		text-align: center;
		border-radius: 41rpx;

		background: linear-gradient(to bottom, #F9773A, #FF3B06);
	}

	.top2 {
		.title {
			text-align: center;
			font-size: 28rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #777777;
			line-height: 40rpx;
		}

		.title:first-child {
			color: #FF2347;
		}
	}
</style>